<div class="w-full max-w-xl mx-auto sm:rounded-lg overflow-hidden border border-gray-200 divide-y divide-gray-200 mt-3">
  <%= link_to notification_path(notification), class: "w-full" do %>
    <div class="relative bg-white py-5 px-6 hover:bg-gray-50 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-600">
      <div class="flex justify-between space-x-3">
        <span class="shrink-0 whitespace-nowrap text-sm text-gray-500">
          <%= render TimeComponent.new(notification.created_at) %>
        </span>
      </div>
      <div class="mt-3">
        <p class="line-clamp-2 text-sm text-gray-600 text-left">
          <%= notification.to_notification.title %>
        </p>
      </div>
    </div>
  <% end %>
</div>
